<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<style type="text/css">
			.s {
				padding-left: 110px;
			}
			
			.d {
				padding-left: 100px;
			}
			
			.ww {
				list-style-type: none;
				line-height: 50px;
			}
			
			.e {
				background-color: #F8F8F8;
				line-height: 20px;
			}
			
			#q {
				margin-left: 150px;
			}
			
			#w {
				margin-left: 150px;
			}
			
			#aa {
				margin-left: 50px;
			}
			
			#bb {
				margin-left: 50px;
			}
			
			#cc {
				margin-left: 50px;
			}
			
			a {
				color: blue;
			}
			
			a:hover {
				text-decoration: none;
				color: #00BE06;
			}
			
			.navbar {
				margin-bottom: auto;
				padding-left: 160px;
				height: 65px;
			}
			
			.logo {
				padding: 19px;
			}
			
			.tupian {
				padding-top: 3px;
				position: relative;
				left: -40px;
			}
			
			.navbar-nav>li>a {
				padding-left: 0px;
				padding-bottom: 20px;
				padding-top: 20px;
			}
			
			.button {
				width: 75px;
				height: 40px;
				border: none;
				margin-top: 2px;
				border-bottom-right-radius: 25px;
				border-top-right-radius: 25px;
				background-color: #00BE06;
				padding-right: 70px;
			}
			
			.button>span {
				position: absolute;
				top: 11px;
				margin-right: 50px;
			}
			
			.dh {
				width: 260px;
				height: 40px;
				border: none;
				background-color: #333333;
				float: left;
				margin-top: 3px;
				border-bottom-left-radius: 25px;
				border-top-left-radius: 25px;
				outline: none;
				opacity: 0.5;
			}
			
			.form-group {
				margin-right: 50px;
			}
			
			#back {
				background-image: url(img/tq-banner-bg@2x.jpg);
				height: 400px;
			}
			
			.toubu1 {
				background-color: black;
				width: 530px;
				height: 24px;
				font-size: 15px;
				position: absolute;
				left: 120px;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
			}
			
			.toubu2 {
				background-color: black;
				width: 390px;
				height: 24px;
				font-size: 15px;
				position: absolute;
				left: 185px;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
			}
			
			.toubu1 a {
				font-size: 13px;
				color: white;
				margin-left: 16px;
				padding-left: 5px;
			}
			
			.toubu2 a {
				font-size: 13px;
				color: white;
				margin-left: 16px;
				padding-left: 5px;
			}
			
			.toubu1 a:hover {
				color: #C8A06A;
				text-decoration: none;
			}
			
			.toubu2 a:hover {
				color: #C8A06A;
				text-decoration: none;
			}
			
			.huangjin1 {
				color: #E3BA77;
				font-size: 40px;
				font-weight: 400;
			}
			
			.huangjin2 {
				color: #FFEFD7;
				font-size: 40px;
				font-weight: 400;
			}
			
			.xiaozi1 {
				position: absolute;
				color: #E3BA77;
				font-size: 20px;
				top: 95px;
				right: 30px;
			}
			
			.xiaozi2 {
				position: absolute;
				color: #D6BE97;
				font-size: 20px;
				top: 85px;
				right: -8px;
			}
			
			.an1 {
				border-radius: 100px;
				width: 165px;
				height: 35px;
				position: absolute;
				top: 165px;
				left: 170px;
				color: #E3BA77;
				background-color: transparent;
				font-size: 18px;
				border-color: #E3BA77;
			}
			
			.an2 {
				border-radius: 100px;
				width: 165px;
				height: 35px;
				position: absolute;
				top: 165px;
				left: 225px;
				color: #D6BE97;
				background-color: transparent;
				font-size: 18px;
				border-color: #D6BE97;
			}
			
			.dfk {
				background-color: #F9F9F9;
				width: 260px;
				height: 125px;
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
			}
			
			.dfk:hover {
				background-color: saddlebrown;
			}
			
			.banquan a {
				color: #000000;
			}
			
			.banquan a:hover {
				text-decoration: none;
				color: #E3BA77;
			}
			
			.VIP {
				position: absolute;
				min-width: 185px;
				padding-top: 14px;
				left: -82px;
				margin-top: 14px;
			}
			
			.denglu {
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				color: white;
				background-color: #C8A06A;
				border: none;
				margin-left: 50px;
				"

			}
			
			a:hover {
				text-decoration: none;
			}
			
			.e a {
				color: ;
			}
			
			.kaitong [type="button"] {
				height: 30px;
				width: 100px;
				border: none;
				color: white;
				border-bottom-right-radius: 30px;
				border-top-right-radius: 30px;
				border-bottom-left-radius: 30px;
				border-top-left-radius: 30px;
				outline: none;
			}
			
			.btn1 [type="button"] {
				height: 30px;
				width: 80px;
				border: none;
				color: orange;
				border: 1px solid orange;
				background-color: white;
				border-bottom-right-radius: 30px;
				border-top-right-radius: 30px;
				border-bottom-left-radius: 30px;
				border-top-left-radius: 30px;
				outline: none;
			}
			
			.jijfen {
				color: #000000;
			}
			
			.tpfd {
				transition: transform 0.5s;
			}
			
			.tpfd:hover {
				transform: scale(1.05)
			}
		</style>
	</head>

	<body>

		<nav class="navbar navbar-inverse">

			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
					<a class="logo" href="index.html"><img src="img/2019-12-09_083755.png" class="tupian"></a>
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">

						<li>
							<a href="DianShiJu.html">电视剧</a>
						</li>
						<li>
							<a href="#">电影</a>
						</li>
						<li>
							<a href="ReSouBang.html">热搜榜</a>
						</li>

					</ul>
					<form class="navbar-form navbar-left" role="search">

						<div class="form-group">
							<input type="text" placeholder="木鱼" style="color: white; padding-left: 15px;" class="dh">
							<button class="input-group-addon glyphicon glyphicon-search button" id="basic-addon1"><span>搜全网</span></button>
						</div>
					</form>

					<ul class="nav navbar-nav">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
								<div class="t" style="position: relative;bottom: 25px;right: 20px;"><img src="img/2019-12-14_113538.png" class="vipchatu" />
									<ul class="dropdown-menu VIP">
										<li>
											<a href="vip1.html">
												<p><img src="img/10e25c7db4664aeea5f3650a7962d722.png" style="width: 25px;height: 25px;float: left;position: relative;left: -6px;bottom: 3px;" />了解VIP会员特权</p>
											</a>
										</li>
										<li>
											<a href="vip2.html">
												<p><img src="img/4e2e4b297d294926b025d86b8b619d85.png" style="width: 25px;height: 25px;float: left;position: relative;left: -6px;bottom: 3px;" />领取VIP会员福利</p>
											</a>
										</li>
										<li>
											<a href="vip3.html">
												<p><img src="img/fe1d5f33d4034eb0ab61a7abf0ce222f.png" style="width: 25px;height: 25px;float: left;position: relative;left: -6px;bottom: 3px;" />做任务，领奖励</p>
											</a>
										</li>
										<li>
											<a href="#">
												<button class="denglu">登录</button>
											</a>
										</li>
									</ul>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="q" style="position: relative;bottom: 8px;">
									<div class="glyphicon glyphicon-cloud-upload ac" aria-hidden="true" style="position: relative;left: 7px;"></div>
									<div class="shangchuan">上传</div>
								</div>
							</a>
						</li>
						<li>
							<a href="KeHuDuan.html">
								<div class="w" style="position: relative;bottom: 8px;">
									<div class="glyphicon glyphicon-blackboard kh" aria-hidden="true" style="position: relative;left: 14px;"></div>
									<div class="kehu">客户端</div>
								</div>
							</a>

						</li>

						<li>
							<a href="#">
								<div class="r" style="position: relative;bottom: 8px;">
									<div class="glyphicon glyphicon-dashboard kg" aria-hidden="true" style="position: relative;left: 7px;"></div>
									<div class="kanguo">看过</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#"><img src="img/2019-12-15_173518.png " class="rentou" style="position: relative;bottom: 8px;" /></a>
						</li>
					</ul>
				</div>
		</nav>

		<!--<div class="container">
				<div class="row">
					<div class="col-md-4 a"><img src="img/2019-12-06_215159.png" /></div>
					<div class="col-md-4 s"><img src="img/2019-12-06_214914.png" /><br />
						<span>
						<!--<input type="button" name="" id="" value="立即开通" />-->
		<!--<button type="button" class="btn btn-warning">立即开通</button>

					</span><br /> 新客户首月不超过8元
					</div>
					<div class="col-md-4 d"><img src="img/2019-12-06_215001.png" /><br />
						<span>
						<!--<input type="button" name="" id="" value="立即开通" />-->
		<!--<button type="button" class="btn btn-success" value="立即开通">立即开通</button>

					</span><br /> 畅享精彩体育赛事
					</div>
				</div>
			</div>-->

		<div class="container">
			<div class="row">
				<div class="col-md-4">
					<img src="img/2019-12-06_215159.png" />
				</div>
				<div class="col-md-4 kaitong" style="text-align: center;">
					<div><img src="img/2019-12-06_214914.png" style="margin-bottom:10px;" /><br/>
						<input type="button" value="立即开通" style="margin-bottom: 10px;background-color:#C8A06A;" /><br />
						<p>新客首月不超过8元</p>
					</div>
				</div>
				<div class="col-md-4 kaitong" style="text-align: center;">
					<div><img src="img/2019-12-06_215001.png" style="margin-bottom:10px;" /><br/>
						<input type="button" value="立即开通" style="margin-bottom: 10px;background-color:#00BE06;" /><br />
						<p>畅享精彩体育赛事</p>
					</div>
				</div>
			</div>
		</div>
		<!--下面是第二部分-->

		<div class="container">
			<div class="col-md-3 e">
				<ul class="ww">
					<li onclick="bfjl">
						<a href="#"><span class="glyphicon glyphicon-time"></span>&nbsp;&nbsp;播放记录</a>
					</li>
					<li>
						<a href="#"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp;我的关注</a>
					</li>
					<li>
						<a href="#"><span class="glyphicon glyphicon-modal-window"></span>&nbsp;&nbsp;我的收藏</a>
					</li>
					<li>
						<a href="#"><span class="glyphicon glyphicon-dashboard"></span>&nbsp;&nbsp;我的预约</a>
					</li>
					<li>
						<a href="#"><span class="glyphicon glyphicon-envelope"></span>&nbsp;&nbsp;我的消息</a>
					</li>
					<li>
						<a href="#"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;我的空间</a>
					</li>
					<li>
						<a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;个人设置</a>
					</li>
					<li>
						<a href="#"><span class="glyphicon glyphicon-star-empty"></span>&nbsp;&nbsp;我的积分</a>
					</li>
					<li>
						<a href="#"><span class="glyphicon glyphicon-tasks"></span>&nbsp;&nbsp;VIP会员</a>
					</li>
					<li>
						<a href="#"><span class="glyphicon glyphicon-briefcase"></span>&nbsp;&nbsp;我的钱包</a>
					</li>
					<li>
						<a href="#"><span class="glyphicon glyphicon-oil"></span>&nbsp;&nbsp;创作中心</a>
					</li>
				</ul>
			</div>
			<div class="col-md-9">
				<div style="margin-top: 10px;margin-left: 10px;margin-bottom: 15px;">
					<h3>做任务领VIP</h3></div>
					<div style="border: 2px solid green; width: 150px;"></div>
					<div>&ensp;</div>
				<img src="img/2019-12-06_215029.png" height="100" width="860" />

				<div style="margin-left: 10px;">
					<h3>每日任务</h3></div>
				<div class="row">
					<div class="col-md-4 btn1">
						<div class="col-md-7"><img src="img/2019-12-06_215054.png" width="55%" />&ensp;签到</div>
						<div class="col-md-5" style="margin-top: 15px;"><input type="button" value="去完成" /></div>
					</div>
					<div class="col-md-4 btn1">
						<div class="col-md-9"><img src="img/2019-12-06_215104.png" width="40%" />观看视频5分钟</div>
						<div class="col-md-3" style="margin-top: 15px;"><input type="button" value="去完成" /></div>
					</div>
					<div class="col-md-4 btn1">
						<div class="col-md-9"><img src="img/2019-12-06_215113.png" width="38%" />访问网页热点</div>
						<div class="col-md-3" style="margin-top: 15px;"><input type="button" value="去完成" /></div>
					</div>
				</div>
				<div style="margin-left: 10px;margin-top: 40px;">
					<h3>积分商城</h3></div>
				<div class="col-md-4">
					<div class="thumbnail tpfd" style="text-align: center;width: 200px;">
						<div><img src="img/2019-12-22_224212.png" /></div>
						<a href="#" class="jijfen">亚麻家用拖鞋劵</a>
						<div style="color: orange;">80积分</div>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>